<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
	console.log("main.js run");

	/**
	 * 页面加载完成后执行
	 */
	$(document).ready(function () {
		console.log("page load");

		// 异步加载分类
		loadCategory();

		// 当鼠标移上时，加载该分类下的商品
		//loadGoodsByCategory();

		// 发送异步加载热卖商品
		loadHotGoods();

		// 发送异步加载推荐商品
		loadRecommendGoods();
	});


	/**
	 * 异步加载分类
	 */
	function loadCategory() {

		$.ajax({
			type: "POST",// 请求的方式默认为get 改为Post
			url: "${pageContext.request.contextPath}/CategoryServlet",// 往服务器端请求的地址 写成绝对路径
			data: {
				method: "loadCategory"
			},// 往服务器端发送的数据
			// 接受服务器端数据函数 回调函数
			success: function (data) {
				// data是服务器返回的数据
				if (data != "") {
					// 解析字符串，进行把分类添加到页面
					addCategoryData(data);
				} else {
					console.log("服务器端异常请稍后再试");
				}
			}
		});
	}

	/**
	 * 解析字符串，进行把分类添加到页面
	 * 
	 * @param {*}
	 *            jsonStr
	 */
	function addCategoryData(jsonStr) {
		if (jsonStr == null) {
			console.log("没有数据");
			return;
		}

		var arr = eval(jsonStr);// 把json字符串变成json数组
		$.each(arr, function (key, value) {
			var li_list = '<li><a id="' + value.cid + '" href="${pageContext.request.contextPath}/GoodsServlet?method=findGoodsByCategory&cid=' + value.cid + '">'
				+ value.cname + '</a></li>';

			$("#ul_category").append(li_list);

		});
	}

	/**
	 * 当鼠标移上时，加载该分类下的商品 通过分类异步查询商品
	 */
	function loadGoodsByCategory() {

		// 为每个分类动态添加事件
		$("#ul_category").on("mouseover", "li", function () {

			var aLabel = $(this).children(); // 获取li下的a标签

			// 删除a标签的所有兄弟标签
			var divArr = $(this).children("div");
			if (divArr != null) {
				$.each(divArr, function (i, element) {
					element.remove();
				});
			}

			var idValue = aLabel.attr("id"); // 获取a标签的id，id值是分类的cid

			// 进行异步查询该分类下的商品
			$.ajax({
				type: "POST",// 请求的方式默认为get 改为Post
				url: "${pageContext.request.contextPath}/GoodsServlet",// 往服务器端请求的地址 写成绝对路径
				data: {
					method: "findGoodsByMain",
					cid: idValue
				},// 往服务器端发送的数据
				// 接受服务器端数据函数 回调函数
				success: function (data) {
					// data是服务器返回的数据
					if (data != "") {
						// 解析字符串，进行把分类下的商品添加到页面
						addGoodsByCategoryData(data, aLabel);
					} else {
						console.log("服务器端异常请稍后再试");
					}
				}
			});

		});
	}

	/**
	 * 解析字符串，进行把分类下的商品添加到页面
	 * @param {*} jsonStr 
	 */
	function addGoodsByCategoryData(jsonStr, label) {

		if (jsonStr == null || jsonStr == "[]") {
			console.log("该分类下没有商品");
			return;
		}

		var arr = eval(jsonStr);// 把json字符串变成json数组

		var goodsList = '<div class="pop"><div class="left fl">';

		$.each(arr, function (key, value) {

			goodsList += '<div>' +
				'	<div class="xuangou_left fl">' +
				'		<a href="${pageContext.request.contextPath}/GoodsServlet?method=loadGoods&gid=' + value.gid + '">' +
				'			<div class="img fl"><img class="xungouImg" src="${pageContext.request.contextPath}/image/goods/' + value.image + '" alt="商品图片"></div>' +
				'			<span class="fl">' + value.gname + '</span>' +
				'			<div class="clear"></div>' +
				'		</a>' +
				'	</div>' +
				'	<div class="xuangou_right fr"><a href="">选购</a></div>' +
				'	<div class="clear"></div>' +
				'</div>';
		});

		goodsList += '</div></div>';
		label.after(goodsList);

	}

	/**
	 * 发送异步加载热卖商品
	 */
	function loadHotGoods() {
		// console.log("loadHotGoods");
		$.ajax({
			type: "POST",// 请求的方式默认为get 改为Post
			url: "${pageContext.request.contextPath}/GoodsServlet",// 往服务器端请求的地址 写成绝对路径
			data: {
				method: "loadHotGoods"
			},// 往服务器端发送的数据
			// 接受服务器端数据函数 回调函数
			success: function (data) {
				// data是服务器返回的数据
				if (data != "") {
					// 解析字符串，进行把分类下的商品添加到页面
					// console.log(data);
					addHotGoods(data);
				} else {
					console.log("服务器端异常请稍后再试");
				}
			}
		});
	}

	// {"category":null,"cid":"2","desc":"剁手都不能买","gdel":false,"gid":"13","gname":"小米手机1","image":"1.jpg","parameter":"2222222222222222222","price":65.5,"promote":"0"}
	// 在热卖区域显示商品
	function addHotGoods(data) {
		var arr = eval(data);

		$.each(arr, function (key, value) {
			console.log("value = " + JSON.stringify(value));
			var goodsList =
				'<div class="mingxing fl">' +
				'	<div class="sub_mingxing"><a href="${pageContext.request.contextPath}/GoodsServlet?method=loadGoods&gid=' + value.gid + '"><img src="${pageContext.request.contextPath}/image/goods/' + value.image + '" alt="商品图片"></a></div>' +
				'	<div class="pinpai"><a href="${pageContext.request.contextPath}/GoodsServlet?method=loadGoods&gid=' + value.gid + '">' + value.gname + '</a></div>' +
				'	<div class="youhui">' + value.price + '</div>' +
				'	<div class="jiage">' + value.price + '元起</div>' +
				'</div>';
			$("#hostList").prepend(goodsList);
		});
	}

	// 发送异步加载推荐商品
	function loadRecommendGoods() {
		console.log("loadHotGoods");
		$.ajax({
			type: "POST",// 请求的方式默认为get 改为Post
			url: "${pageContext.request.contextPath}/GoodsServlet",// 往服务器端请求的地址 写成绝对路径
			data: {
				method: "recommendGoods"
			},// 往服务器端发送的数据
			// 接受服务器端数据函数 回调函数
			success: function (data) {
				// data是服务器返回的数据
				if (data != "") {
					// 解析字符串，进行把商品添加到页面
					addRecommendGoods(data);
				} else {
					console.log("服务器端异常请稍后再试");
				}
			}
		});
	}

	// 在热卖区域显示商品
	function addRecommendGoods(data) {
		var arr = eval(data);

		//{"category":null,"cid":"4","desc":"不得不买的衣服","gdel":false,"gid":"14","gname":"男装T恤","image":"txu01.jpg","parameter":"33333333333333333","price":9.99,"promote":"2"}

		$.each(arr, function (key, value) {
			console.log("value = " + JSON.stringify(value));
			var goodsList = '<div class="remen fl">';

			if (key == 1) {
				goodsList += '	<div class="xinpin"><span>新品</span></div>';
			} else if (key == 3) {
				goodsList += '	<div class="xinpin"><span style="background:red">享6折</span></div>';
			} else {
				goodsList += '	<div class="xinpin"><span style="background:#fff"></span></div>';
			}

			goodsList += '	<div class="tu"><a href="${pageContext.request.contextPath}/GoodsServlet?method=loadGoods&gid=' + value.gid + '"><img style="width:150px;height:150px;" src="${pageContext.request.contextPath}/image/goods/' + value.image + '"></a></div>' +
				'	<div class="miaoshu"><a href="">' + value.gname + '</a></div>' +
				'	<div class="jiage">' + value.price + '元</div>' +
				'	<div class="pingjia">' + parseInt((Math.random()) * 10000, 10) + '评价</div>' +
				'	<div class="piao">' +
				'		<a href="${pageContext.request.contextPath}/jsps/order/desc.jsp">' +
				'			<span>' + value.desc + '</span>' +
				'		</a>' +
				'	</div>' +
				'</div>';
			$("#recommend").prepend(goodsList);
		});

		var left='<div class="remen fl"><a href=""><img style="width: 234px;height: 300px;" src="${pageContext.request.contextPath}/image/resImg/guaguoshucai.png"></a></div>';
		$("#recommend").prepend(left);
	}

</script>